<script setup lang="ts">
import { ref } from 'vue'
import {
  NButton,
  NInput,
  NPopover,
  NUpload,
  useMessage,
  NIcon,
  type UploadCustomRequestOptions,
  type UploadFileInfo,
} from 'naive-ui'
import EmojiPicker from './EmojiPicker.vue'
import { Icon } from '@iconify/vue'
import { Image } from '@vicons/carbon'
import { upload } from '@/apis/common'
import type { MomentDTO } from '@/types/dto/MomentDTO'
import { addMomentService } from '@/apis/front/circle'

const message = useMessage()


const { circleId } = defineProps<{
  circleId?: number | undefined
}>()

// 处理选择表情
const handleSelectEmoji = (emoji: string) => {
  form.value.content += emoji
}
// 上传图片
const customRequest = async ({ file, onFinish }: UploadCustomRequestOptions) => {
  const formData = new FormData()
  // 上传图片, 取出file的最后一个文件
  console.log(file.file)
  formData.append('file', file.file as File)
  const res = await upload(formData)
  form.value.picUrls?.push(res.data.data)
  onFinish()
}

const onRemove = ({index}:{ file: UploadFileInfo, fileList: Array<UploadFileInfo>, index: number }) => {
  // 删除图片
  form.value.picUrls?.splice(index, 1)
}

const form = ref<MomentDTO>({
  circleId: circleId,
  content: '',
  picUrls: [],
})

watch(
  () => circleId,
  () => {
    form.value.circleId = circleId
  },
)
const emit = defineEmits(['publish'])
// 发布动态
const handlePublish = async () => {
  await addMomentService(form.value)
  // 重置状态
  form.value.content = ''
  form.value.picUrls = []
  up.value?.clear()
  // 显示成功消息
  message.success('发布成功')
  emit('publish')
}

const up = ref<InstanceType<typeof NUpload>>()

</script>

<template>
  <div class="post-publisher">
    <div class="publisher-content">
      <n-upload
        abstract
        :list-type="'image'"
        :custom-request="customRequest"
        @remove="onRemove"
        ref="up"
      >
        <div class="input-area">
          <n-input
            v-model:value="form.content"
            type="textarea"
            placeholder="分享你的问题..."
            :autosize="{
              minRows: 3,
            }"
            show-count
            :maxlength="1000"
          />
          <n-upload-file-list></n-upload-file-list>
          <div class="publisher-tools">
            <div class="tool-buttons flex items-center">
              <n-popover
                trigger="click"
                placement="top"
                :show-arrow="false"
                style="padding: 0"
              >
                <template #trigger>
                  <n-button text size="small">
                    <template #icon>
                      <Icon icon="iconoir:emoji" width="24" height="24" />
                    </template>
                    表情
                  </n-button>
                </template>
                <EmojiPicker @select="handleSelectEmoji" />
              </n-popover>

              <n-upload-trigger #="{ handleClick }" abstract>
                <n-button @click="handleClick" text>
                  <template #icon>
                    <n-icon><Image /></n-icon>
                  </template>
                  上传
                </n-button>
              </n-upload-trigger>
            </div>

            <div class="publish-button">
              <n-button
                type="primary"
                :disabled="!form.content"
                @click="handlePublish"
              >
                发布
              </n-button>
            </div>
          </div>
        </div>
      </n-upload>
    </div>
  </div>
</template>

<style scoped>
.post-publisher {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
}

.publisher-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.publisher-content {
  padding: 16px;
}

.input-area {
  display: flex;
  flex-direction: column;
}

.publisher-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f5f5f5;
}

.tool-buttons {
  display: flex;
  gap: 16px;
}

.publish-button {
  margin-left: auto;
}
</style>
